<script>
$('document').ready(function() {
    $('#delete-multiple-items').click(function() {
        $('#delete-multiple-items-form').submit();
    });

    $('#search-item').click(function() {
        $('#search-bar').fadeIn(400, function() {
            $('#search-box-input').focus();
        });
    });

    $('#search-box-input').focusout(function() {
        $('#search-bar').fadeOut();
    });

    $('#search-box-input').keypress(function(e) {
        if (e.which === 13) {
            window.top.location = 'http://${Session.webappIp}/java${Session.webappContext}/items?q='+$(this).val();
        }
    });
    
    $('.item-check-input').change(function() {
        if (this.checked == true) {
            $(this).parent().css('background-color', '#c02835');
        } else {
            $(this).parent().css('background-color', '#ffe3e2');
        }
    });
    
});
</script>
<section id="content-title">
	<h1 style="display:none;"><@spring.message 'itemListPage.content.title' /></h1>
	<img src="http://${Session.webappIp}/java${Session.webappContext}/resources/images/liste-des-annonces.jpg" alt="<@spring.message 'itemListPage.content.title' />" />
	<div id="icons">
		<div class="icon search">
			<a id="search-item" href="#"></a>
		</div>
		<div class="icon delete">
			<a id="delete-multiple-items" href="#" onclick="performDelete('http://${Session.webappIp}/java${Session.webappContext}/delete')"></a>
		</div>
		<div class="icon add">
			<a id="add-items" href="http://${Session.webappIp}/java${Session.webappContext}/add"></a>
		</div>
		<div id="search-bar">
			<input id="search-box-input" type="text" class="search-box">
		</div>
    </div>
</section>
<section id="main-content">
	<table id="items-table">
		<#if articles?? && articles?size &gt; 0>
		<#list articles as article>
		<tr id="item-${article.id}-row">
			<td class="check">
				<input class="item-check-input" id="item-${article.id}-check" name="item[${article.id}]" type="checkbox" value="${article.id}" />
			</td>
			<td class="image">
				<img src="http://${Session.webappIp}/java${Session.webappContext}/images/${article.pictureUrl}" />
			</td>
			<td class="info">
				<div id="title">
					<h2 onclick="view_item('http://${Session.webappIp}/java${Session.webappContext}/details/?id=${article.id}');">${article.title}</h2>
					<span class='about'>${(article.addedDate?string("EEEE dd MMMM '&agrave;' hh'h'mm"))!!} - ${(article.postalCode)!!} - ${(article.region.name)!!}</span>
				</div>
				<div id="icons">
					<div class="icon view">
						<a id="view-item" href="#" onclick="view_item('http://${Session.webappIp}/java${Session.webappContext}/details/?id=${article.id}');"></a>
					</div>
					<div class="icon edit">
						<a id="edit-item" href="http://${Session.webappIp}/java${Session.webappContext}/edit/?id=${article.id}"></a>
					</div>
					<div class="icon delete">
						<a id="delete-item" href="http://${Session.webappIp}/java${Session.webappContext}/delete/?id=${article.id}"></a>
					</div>
				</div>
				<div id="description">
					<p>${(article.description)!!}</p>
				</div>
			</td>
			<td class='price'>${(article.price)!!}&euro;</td>
		</tr>
		</#list>
		</#if>
	</table>
</section>